<!-- 展示PDF抽取细节 -->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { NButton, NImage, NSpace, NSpin, useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import type { IImageItem, ILatex, ITable } from '@/views/pdf/DataModel'
import { useLocalKnowledgeHubState } from '@/store'
const router = useRouter()
const message = useMessage()
const showSpin = ref(false)
const spinDescription = ref('正在加载PDF抽取细节...')
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

const localKnowledgeHubState = useLocalKnowledgeHubState()
const images = ref<null | IImageItem[]>([])
// 暂时表格和公式都是图像
const tables = ref<null | ITable[]>([])
const latex = ref<null | ILatex[]>([])

const previewImageStyle = {
  style: { border: '5px solid black' },
}
const normalImageStyle = {
  style: { border: '2px solid black', maxWidth: '400px', maxHeight: '400px' },
}

const goBack = () => {
  router.back()
}

const getExtractInfo = async () => {
  // 打开遮罩层
  showSpin.value = true
  spinDescription.value = '正在加载PDF抽取细节...'
  const pdfMeta = localKnowledgeHubState.pdfMeta
  const url = 'http://localhost:8088/extract_pdf'
  const data = {
    pdfUrl: pdfMeta?.staticUrl,
    pdfUuid: pdfMeta?.pdfUuid,
  }
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    mode: 'cors',
  })
  if (!response.ok) {
    message.error('网络错误；抽取失败')
    return
  }
  const tmpData = await response.json()
  if (!tmpData || tmpData.code === 0) {
    message.error(`抽取失败:${tmpData.msg}`)
    return
  }
  const success = tmpData.data.success as boolean
  if (!success) {
    // 等待抽取完成
    sleep(500)
    await getExtractInfo()
    return
  }
  // 添加图像
  const imageList = tmpData.data.images as string[]
  const formulaList = tmpData.data.formulas as string[]
  const tableList = tmpData.data.tables as string[]
  images.value = imageList.map(src => ({ src }))
  latex.value = formulaList.map(src => ({ src }))
  tables.value = tableList.map(src => ({ src }))

  // 关闭遮罩层
  showSpin.value = false
}

onMounted(() => {
  // 调用网络请求，查看抽取PDF界面
  getExtractInfo()
})
</script>

<template>
  <NSpin :show="showSpin" :description="spinDescription">
    <div class="text-2xl">
      抽取到的图像如下
    </div>
    <div id="image-scroll-container" class="image-container">
      <NImage
        v-for="image, index in images" :key="index" class="image-content" width="400" height="400"
        :src="image.src" lazy :intersection-observer-options="{ root: '#image-scroll-container' }"
        object-fit="scale-down" :previewed-img-props="previewImageStyle" :img-props="normalImageStyle"
      >
        <template #placeholder>
          <div
            style="
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0001;
          "
          >
            加载中
          </div>
        </template>
      </NImage>
    </div>
    <div class="text-2xl">
      抽取到的表格如下
    </div>
    <div id="table-scroll-container" class="image-container">
      <NImage
        v-for="image, index in tables" :key="index" class="image-content" width="400" height="400"
        :src="image.src" lazy :intersection-observer-options="{ root: '#table-scroll-container' }"
        object-fit="scale-down" :previewed-img-props="previewImageStyle" :img-props="normalImageStyle"
      >
        <template #placeholder>
          <div
            style="
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0001;
          "
          >
            加载中
          </div>
        </template>
      </NImage>
    </div>
    <div class="text-2xl">
      抽取到的公式如下
    </div>
    <div id="latex-scroll-container" class="image-container">
      <NImage
        v-for="image, index in latex" :key="index" class="image-content" width="400" height="400" :src="image.src"
        lazy :intersection-observer-options="{ root: '#latex-scroll-container' }" object-fit="scale-down"
        :previewed-img-props="previewImageStyle" :img-props="normalImageStyle"
      >
        <template #placeholder>
          <div
            style="
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0001;
          "
          >
            加载中
          </div>
        </template>
      </NImage>
    </div>
    <NSpace>
      <NButton type="primary" @click="goBack">
        返回上一页
      </NButton>
    </NSpace>
  </NSpin>
</template>

<style lang="less" scoped>
/**
* note: css 中如果对naive-ui的组件进行样式修改，必须使用x-x的写法
* 同时ESlint规定 css写注释需要使用/*注释内容* /的形式(多行注释)
*/
.image-container {
  display: flex;
  display: -webkit-flex;
  // note: 坑flex横向会默认压缩宽度使其都在一行，为了保证子组件不被压缩，且能横向滚动需要如下操作
  overflow: auto;
  flex-wrap: nowrap; // 不换行
  gap: 20px;
}

.image-content {
  // note: 坑flex横向会默认压缩宽度使其都在一行，为了保证子组件不被压缩，且能横向滚动需要如下操作
  flex-shrink: 0;
}
</style>
